import React from 'react';
import './index.less';
import { Icon, Toast, ActionSheet, Tools } from 'weaver-mobile';
import { NavLink } from 'react-router-dom';
import app from '../../../apis/app';
import FormComponents from '../../../common/form-components';
import Loading from '../../../common/loading';
import If, { Else, Then, When } from '../../../common/if';

const getLabel = Tools.getLabel; 
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;

if (isIPhone) {
  wrapProps = {
    onTouchStart: e => e.preventDefault(),
  };
}

export const HeaderBtn = ({ appid, appName, editRight, fillinEnable, onFillinEnable }) => {
  const showMoreAction = () => {
    let buttons = [];

    buttons = [{
      content: fillinEnable ? getLabel(523248, '停止收集') : getLabel(523249, '继续收集'),
      onClick: () => onChangeStatus(appid, fillinEnable),
    }, ];
    buttons.push({
      content: getLabel(523250, '取消')
    })

    ActionSheet.showActionSheetWithOptions({
      options: buttons,
      cancelButtonIndex: buttons.length - 1,
      maskClosable: true,
      'data-seed': 'logId',
      wrapProps,
    });
  }

  const onChangeStatus = (appid, fillinEnable) => {
    const enable = fillinEnable;

    app.fillinEnable({
      appid: appid,
      enable: !enable
    }).then(() => {
      
      onFillinEnable(!fillinEnable);
      Toast.success(getLabel(523251, "操作成功"), 1);
    });
  }

  const search = JSON.parse(window.localStorage.getItem('search'));

  return (
    <div className='header'>
      <NavLink to={`/form${search}`}>
        <div><Icon type='headquarters' size='md' /></div>
      </NavLink>
      <div className='right'>
        <When condition={editRight}>
          <NavLink to={{ pathname: `/form/power/${appid}` }}><i className='iconfont iconrenyuan'></i></NavLink>
        </When>
        <NavLink to={{ pathname: '/form/share', appName: appName, appid: appid }}>
          <Icon type='share' size='xs' />
        </NavLink>
        <When condition={editRight}>
          <a onClick={showMoreAction} ><Icon type='list' size='xs' /></a>
        </When>
      </div>
    </div>
  )
};

export default class Detail extends React.Component {

  constructor(props) {
    super();

    this.state = {
      appid: props.match.params.id,
      submitCount: 0,
      fillinEnable: true,
      loading: true,
      title: '',
      shortKey: '',
      editRight: false
    };

    this.init();
  }

  init() {
    const { appid } = this.state;

    this.setState({ loading: true });
    Promise.all([
      app.getSubmitCount(appid),
      app.getBaseInfo(appid)
    ]).then(([res, data]) => {
      this.setState({ 
        submitCount: res, 
        fillinEnable: data.fillinEnable, 
        title: data.name,
        shortKey: data.shortKey,
        loading: false,
        editRight: data.rightLevel === 2
      });
    });
  }

  onFillinEnable = (fillinEnable) => {
    this.setState({ fillinEnable });
  }

  render () {
    const { submitCount, appid, fillinEnable, title, shortKey, loading, editRight } = this.state;

    return (
      <div className='form-detail'>
        <If condition={loading}>
          <Then>
            <Loading loading={true} className='form-detail-loading' />
          </Then>
          <Else>
            <div className='main'>
              <HeaderBtn 
                appid={appid} 
                appName={title} 
                editRight={editRight} 
                fillinEnable={fillinEnable}
                onFillinEnable={this.onFillinEnable}
              />
              <NavLink to={'/form/statistics/' + encodeURI(appid)}>
                <div className='colect-msg'>
                  <div>{fillinEnable ? getLabel(523252, '收集中') : getLabel(523253, '收集已停止')}，{submitCount}{getLabel(523254, '人已填写')}</div>
                </div>
              </NavLink>
              <div className='edc-app-content'>
                <FormComponents appid={appid} shortKey={shortKey} />
              </div>
            </div>
          </Else>
        </If>
      </div>
    );
  }
}